<template>
	<div class="service">
		<div class="service-top">
			<p>我的服务</p>
		</div>
		<div class="service-buttom">
			<ul>
				<li v-for="item in imgs " :key="item.id">
					<router-link to="/">
						<div class="service-buttom-contxt">
							<img :src="item.imgUrl" >
							<p>{{item.title}}</p>
						</div>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Service',
		data() {
			return{
				imgs:[
					{id:1,imgUrl:require('@/assets/img/User-service1.png'),title:'常用收货地址'},
					{id:2,imgUrl:require('@/assets/img/User-service2.png'),title:'常用出行人'},
					{id:3,imgUrl:require('@/assets/img/User-service3.png'),title:'修改密码'},
					{id:4,imgUrl:require('@/assets/img/User-service4.png'),title:'在线客服'},
					{id:5,imgUrl:require('@/assets/img/User-service5.png'),title:'游侠客APP'}
				]
			}
		}
	}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: black;
	}
	.service{
		margin-bottom: 0.3rem;
		width: 100%;
		height: 5rem;
		background-color: #ffffff;
	}
	.service .service-top{
		height: 30%;
		width: 100%;
		display: flex;
		align-items: center;
	}
	.service-top p{
		font-weight: bold;
		font-size: 0.37rem;
		margin-left: 0.3rem;
	}
	.service .service-buttom{
		width: 100%;
		height: 70%;
	}
	.service-buttom ul{
		height: 100%;
		height: 100%;
	}
	.service-buttom ul li{
		margin-top: 0.5rem;
		float: left;
		width: 25%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.service-buttom ul li .service-buttom-contxt{
		text-align: center;
	}
	.service-buttom ul li .service-buttom-contxt img{
		height:0.5rem;
		width:0.5rem;
	}
	.service-buttom ul li .service-buttom-contxt p{
		line-height: 0.6rem;
	}
</style>
